import React from 'react'
import BaseComponent from 'basecomponent'
import LinkNavbar from 'link-navbar'
import AntTable from 'anttable'
import FuncButton from "func-button";
import apis from 'apis'
import {withRouter} from 'react-router'
import './style.scss'
import {Select} from 'antd';
const Option = Select.Option;

class Employment extends BaseComponent {
  constructor() {
    super(...arguments);
    this.state= {
      companyData: [],
      currentPage: 1,
      pageSize: 10,
      provinceData: [],
      cityData: [],
    }
  }
  componentDidMount() {
    this.getCompanyList();
    this.getProvinceInfo();
  }

  shouldComponentUpdate(nextProps, nextState) {
    if(nextState.companyData && nextState.companyData.length > 0){
      let company = nextState.companyData
      if(nextState.provinceData && nextState.provinceData.length > 0){
        let companyData = company.map((item) => {
          if(item.hasOwnProperty('Addr')){
            return item
          } else {
            let area = parseInt(item.Area / 1000) * 1000
            let addr = nextState.provinceData.filter((province) => {return area === province.Id})
            if (addr && addr.length > 0) item.Addr = addr[0].Name
            return item
          }
        })
        this.setState({companyData: companyData})
      }
      return true
    } else {
      return false
    }
  }
  getCompanyList(area){
    this.companyRP = apis.company.getCompanyList(area,'');
    this.registerRequest(this.companyRP.request);
    this.companyRP.promise
      .then((res)=>{
        let data = res.Data || []
        res.Data&&this.setState({companyData: data});
      })
      .catch((err)=>{
        alert(err.msg)
      })
  }


  getProvinceInfo() {
    this.getProviceRP = apis.address.getProvince();
    this.registerRequest(this.getProviceRP.request);
    this.getProviceRP.promise
      .then((res) => {
        let data = res.Data || []
        let allData = [{Id:'', Name:'全部'}]
        data.map((item) => {
          allData.push(item)
        })
        this.setState({provinceData: allData});
      })
      .catch((err) => {
        alert(err.msg)
      })
  }

  loadCity(selectedOptions){
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    this.getCityRP && this.getCityRP.request.abort();
    this.getCityRP = apis.address.getCity(targetOption.value);
    this.registerRequest(this.getCityRP.request);
    this.getCityRP.promise
      .then((res) => {
        let data = res.Data || [];
        targetOption.loading = false;
        targetOption.children = data.map(function (item) {
          return{
            label:item.Name,
            value:item.Id.toString()
          }
        })
        this.setState({...this.state.provinceData})
      })
      .catch((err) => {
        alert(err.msg)
      })
  }

  handleOnChange(value, options) {
    this.getCompanyList(value)
  }


  watchCompany(text,record){
    let path={
      pathname:'/home/revise/company',
      query:{
        Id:record.Id,
      },
      state:{
        revise: true,
      }
    };
    this.props.router.push(path);
  }

  deleteCompany(text,record){
    this.deleteRP && this.deleteRP.request.abort();
    this.deleteRP = apis.company.deleteCompany(record.Id);
    this.registerRequest(this.deleteRP.request);
    this.deleteRP.promise
      .then((res)=>{
        let data = this.state.companyData
        this.state.companyData.forEach((item, index) => {
          if(item.Id === record.Id) {
            data.splice(index,1)
          }
        })
        this.setState({companyData: data})
      })
      .catch((err) => {
        alert(err.msg)
      })
  }

  render() {
    const {children} = this.props;
    const {companyData,currentPage,pageSize,provinceData} = this.state;
    const columns = [{
      title: '企业名称',
      dataIndex: 'Name',
      key: 'Name',
    }, {
      title: '企业区域',
      dataIndex: 'Addr',
      key: 'Addr'
    },
      {
        title: '企业标签',
        dataIndex: 'Tags',
        key: 'Tag',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
          <a onClick={()=>{this.watchCompany(text,record)}}>查看</a>
            <span className="ant-divider"/>
          <a onClick={()=>{this.deleteCompany(text,record)}}>删除</a>
        </span>
        ),
      }];

    return (
      <div className={'sem-main-content'}>
        <div className={'class-company-page'}>
          <LinkNavbar props={this.props}/>
          {children ? children :
            <div className={'class-company-content'}>
              <FuncButton wrapperName={'class-company-FucBtn'}
                          leftText={'添加'}
                          leftTo={{pathname:'/home/add/company',query:{Id:-1}}}
                          showRight={false}
              />
              <div className={'class-select-div'}>
                <Select className={'area-select'}
                          onSelect={this.handleOnChange.bind(this)}
                          placeholder={'企业区域'}
                          notFoundContent={'-'}>
                  {
                    provinceData.map((item) => {
                      return <Option key={item.Id.toString()} value={item.Id.toString()}>
                        {item.Name}
                      </Option>
                    })
                  }
                </Select>
              </div>
              <AntTable columns={columns} data={companyData} 
                        pagination={true} currentPage={currentPage} pageSize={pageSize}
                        onChange={(pagination)=>{
                          this.setState({
                            currentPage:pagination.current,
                            pageSize:pagination.pageSize,
                          })
                        }}/>
            </div>}
        </div>
      </div>
    );
  }
}

module.exports = withRouter(Employment);
